<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>查看账户</title>
    <link rel="stylesheet" href="../css/base.css"/>
    <script src="../js/all.js"></script>
    <style>
        html{
            background-color: #FFFFFF;
        }
        .account_layer{
            width: 100%;
            height: 100%;
        }
        .seting{
            height: 1.3rem;
            width: 100%;
            padding-top: 0.4rem;
            position: relative;
            border-bottom:0.3rem solid #eee ;
        }
        .seting em{
            position: absolute;
            width: 0.64rem;
            height: 0.88rem;
            background: url("../img/b_left_03.png") no-repeat center;
            left: 2%;
            -webkit-background-size: 80%;
            background-size: 80%;
        }
        .seting h3{
            text-align: center;
            line-height: 0.88rem;
            font-size: 0.36rem;
            color: #000;
        }
        .account_content{
            width: 100%;
            border-bottom:0.3rem solid #eee ;
        }

        .account_content li{
            font-size: 0.3rem;
            height: 1.02rem;
            line-height: 1.02rem;
            background-color: #fff;
            padding-left: 0.3rem;
        }
        .account_content li a{
            color: #5a5a5a;
            display: block;
            width: 100%;
            position: relative;
            font-size: 0.34rem;
        }
        .account_content li:first-of-type{
            border-bottom: 1px solid #eee;
        }
        .account_content li:last-of-type a i{
            position: absolute;
            width: 0.64rem;
            height: 1rem;
            background: url("../img/right_03.png") no-repeat center;
            /*transform: rotate(180deg);*/
            right: 6%;
            top: 0%;
            -webkit-background-size: 80%;
            background-size: 80%;
        }
        .account_content li:first-of-type i{
            background: none;

            font-size: 0.36rem;
            transform: none;
            position: absolute;
            right: 5%;
        }

        #delete{
            width: 95%;
            height: 0.98rem;
            line-height: 0.98rem;
            display: block;
            background-color: #5f321a;
            color: #fff;
            font-size: 0.34rem ;
            position: relative;
            left: 2%;
            margin-top: 0.5rem;
            border-radius: 5px;
        }
        #confirm_delete{
            width: 5.65rem;
            position:absolute;
            left: 12%;
            top:50%;
            transform: translateY(-50%);
            background: #fff;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            border-radius: 15px;
            display: none;
        }
        #confirm_delete{
            z-index: 1009;
        }
        #confirm_delete{
            z-index: 1010;
        }
        #confirm_delete h4{
            text-align: center;
            height: 1.83rem;
            line-height: 1.83rem;
            font-size: 0.32rem;
            margin-bottom:0.5rem;
        }
        #confirm_delete button{
            font-size: 0.32rem;
            position: absolute;
            border:none;
            height: 0.92rem;
            line-height: 0.92rem;
            background-color:rgba(0,0,0,0);
        }
        #confirm_delete .quit{
            left: 20%;
            bottom: 0;
        }
        #confirm_delete .confirm{
            right: 20%;
            bottom: 0;
            color:#ea6476;
        }
        .confirm_delete_show{
            padding:0.2rem 0.5rem;
            color:#fff;
            background-color: rgba(0, 0, 0, .4);
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 5px;
            bottom: 1.4rem;
            /* display:block;*/
            display: none;

        }
        #mask{
            width: 100%;
            height: 100%;
            opacity: 0.4; /*半透明*/
            filter: alpha(opacity=40); /*ie 6半透明*/
            background-color: black;
            position: fixed;
            z-index:1000;
            top: 0;
            left: 0;
            display: none;
        }
        .finish{
            position: absolute;
            right: 3%;
            top: 15%;
            font-size: 0.36rem;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="loading">
    <img src="../img/login.gif" alt=""/>
</div>
<div class="account_layer account_save_layer">
    <div id="mask"></div>
    <header class="seting">
        <em onclick="back()"></em>
        <h3>更多</h3>
        <!-- <i class="finish">完成</i>-->
    </header>
    <ul class="account_content">
        <li class="nickname">
            <!--昵称-->
        </li>
        <li>
            <a href="friends_introduce_remark.html" class="show_remark">备注 <i class="rwmark"></i> </a>
        </li>
    </ul>
    <button id="delete">删除好友</button>
    <div id="confirm_delete" class="clearfix">
        <h4>确定删除该好友</h4>
        <button class="quit"> 取消</button>
        <button class="confirm"> 确定</button>
    </div>
    <div class="confirm_delete_show">
        已删除
    </div>
</div>
<script src="../js/x_rem.js"></script>
<script src="../js/jquery.js"></script>
<script src="../js/template-web.js"></script>
<script id="nickname" type="text/html">
    <a href='javascript:;'>昵称 <i>{{user.nickname?user.nickname:user.username}}</i></a>
</script>
<script>
    $(document).ajaxStop(function(){
        $("#loading").hide();
    });
    /*点击删除 删除好友*/

    $(function(){
        function back(){
            history.go(-1);
        }

        //如果本地显示的有备注信息，就显示

        if(localStorage.getItem("remark")){
            var show=localStorage.getItem("remark");
            console.log(show);
            $(".show_remark i").css("background","none").css("textAlign","right").css("lineHeight","1rem").width("80%").text(show);

            setTimeout(function(){
                remark(localStorage.getItem("remark"));
            },1000)
        } ;


        $("#delete").click(function(){
            $("#confirm_delete").css("display","block");
            $("#mask").css("display","block");
            $(".quit").click(function(){
                $("#confirm_delete").css("display","none");
                $("#mask").css("display","none");
            })
            $(".confirm").click(function(){
                $("#confirm_delete").css("display","none");
                $("#mask").css("display","none");
                $(".confirm_delete_show").css('display','block');
                deleteFriends();
                setTimeout(function(){
                    $(".confirm_delete_show").css('display','none');
                    location.href="connect.html";
                },2000)
            })

        })
        var userId=localStorage.getItem('userId');
        if(userId){
            userId=userId.replace(/\"/g,"");
        }

        var href=location.href.split("=")[1];
        //console.log(href);
        localStorage.setItem("href",href);


        console.log(href);
        function remark(remark){
            $.ajax({
                xhrFields: {
                    withCredentials: true
                },
                type: "post",
                async: false,
                url: "http://39.104.127.252:8080/beyond/api/relationuser/update",
                data: {
                    userId: userId,
                    relationUser: href,
                    relationRemark: $(".rwmark").text()
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (data.code == 0) {
                        localStorage.removeItem("remark");
                    }
                }
            })
        }
        //删除好友
        function deleteFriends(){
            $.ajax({
                xhrFields: {
                    withCredentials: true
                },
                type: "post",
                async: false,
                url: "http://39.104.127.252:8080/beyond/api/spacedynamic/delete",
                data: {
                    userId: userId,
                    relationUser: href,
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (data.code == 0) {

                    }
                }

            })
        }
        function userRemark(){
            $.ajax({
                xhrFields: {
                    withCredentials: true
                },
                type: "post",
                async: false,
                url: "http://39.104.127.252:8080/beyond/api/user/userInfo",
                data:{
                    userId:href
                },
                dataType: 'json',
                success:function(data){
                    console.log(data);
                    if(data.code==0){
                        /*  var html=template("my_dynamic",data);
                         $(".content_main").html(html);*/
                        var html=template("nickname",data);
                        $(".nickname").html(html);
                    }

                },
                error:function(data){
                    console.log(data);
                }
            })
        }
       // userRemark()


    })
</script>
</body>
</html>